<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <part1>
            <template #header>
                <p>魂斗罗</p>
            </template>
            <template #default>
                <p>忍者神龟</p>
            </template>
            <template #footer>
                <p>坦克大战</p>
            </template>

        </part1>
    </div>
</body>

</html>
<script>
    //  具名插槽: 
    // 当 子组件的标签中间有多个内容传递,并且需要在组件模板的不同位置显示,这时候需要拿号入座,
    // 给插槽起具体的命名,然后个组件之间内容对应名字,这样就实现了具名插槽
    // 注意: 组件中的内容中使用 v-slot:插槽名 或者简写#插槽名 时,必须写在template 标签上,
    // 可以指定默认插槽, 在组件中设置 #default ,匹配的是没有起名字的那个slot插槽

    // 特点: 使用插槽 是组件变得更加灵活,一般常用语自定义的ui组件封装,element-ui, element-ui-plus
    // vant-ui 等等这些组件库大量使用插槽 
    const app = Vue.createApp({
        data() {
            return {

            }
        },
        methods: {

        },
        components: {
            part1: {
                template: `<div>
                     <slot name='header'></slot>
                     <div>我是组件1-<slot></slot></div>
                     <slot name='footer'></slot>
                    </div>`
            }
        }
    }).mount('#app')

</script>